<template>
  <el-container>
    <!-- <el-header>
      <blog-header :headerIndex="activeName" @checkComponents="checkComponents"></blog-header>
    </el-header> -->
      <articleIndex v-if="activeName === 'articleIndex'"></articleIndex>
      <articleAdd v-if="activeName === 'articleAdd'"></articleAdd>
      <msg v-if="activeName === 'msg'"></msg>
    <!-- <el-footer v-if="activeName === 'articleIndex'">
      <blog-footer />
    </el-footer> -->
  </el-container>
  <!-- 分页 --> 

</template>

<script>
import BlogHeader from '~/pages/layouts/BlogHeader.vue';
import BlogFooter from '~/pages/layouts/BlogFooter.vue';
import articleIndex from '~/pages/article/index'
import articleAdd from '~/pages/article/add'
import msg from '~/pages/chat/msg'
export default {
  transition: 'fade',
  components: {
    // AppLogo,
    BlogHeader,
    BlogFooter,
    articleIndex,
    articleAdd,
    msg
  },
  data() {
    return {
      activeName: "",
    }
  },
  methods: {
    checkComponents(value) {
      this.activeName = value
      localStorage.setItem("activeName", value)
    },
  },
  created(){
    // this.initDate()
  },
  mounted(){
    // alert(this.$store.getters.userid)
    // this.activeName = localStorage.getItem("activeName") ? localStorage.getItem("activeName") : "articleIndex";
    this.activeName = this.$route.query.key ? this.$route.query.key : 'articleIndex'
  }
}
</script>

<style scoped>
.el-header,
.el-footer {
  padding: 0;
}

.el-header {
  padding: 0;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 30, 0.7);
}

.el-footer {
  background-color: transparent;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0;
}
</style>